<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/admin/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="user-container">
      <!-- 1行3列的布局 -->
      <el-row>
        <el-col :span="10">
          <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="handleAdd"> 添加用户 </el-button>
        </el-col>
        <el-col :span="8" :offset="6">
          <el-input size="small" placeholder="请输入搜索关键字" prefix-icon="el-icon-search" v-model="searchMsg"></el-input>
          <el-button type="primary" size="mini" @click="searchUsers">搜索</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table border :data="users">
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="是否是管理员" prop="ismanager"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="users">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(users.row)"> 编辑 </el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDel(users.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BackEndMyUser',

  data() {
    return {
      searchMsg: '',
      users: [],
      page: 1 /* 当前页 */,
      size: 5 /*  */,
      total: 0 /* 总记录数 */,
      dialogVisible: false,
      userForm: {
        username: '',
        password: '',
        ismanager: ''
      },
      userRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        ismanager: [{ required: true, message: '请选择是否管理员', trigger: 'change' }],
        isEdit: false
      }
    }
  },

  created() {
    this.getusers()
  },
  methods: {
    getusers() {
      this.$http.get(`/users?page=${this.page}&size=${this.size}`).then(({ code, result }) => {
        if (code === 0) {
          this.users = result.data
          this.total = result.total
        }
      })
    },
    handleSizeChange(val) {
      // 记录每页显示多少条记录
      this.size = val
      // 发送请求, 更新数据
      this.getusers()
    },
    handleCurrentChange(val) {
      // 记录当前的页码
      this.page = val

      // 发送请求
      this.getusers()
    },
    handleEdit(val) {
      const id = val.id
      this.$router.push({ name: 'usereditor', params: { id: id } })
    },
    handleAdd() {
      this.$router.push('/user/add')
    },
    handleDel(id) {
      this.$http.delete(`/users/${id}`).then(res => {
        // 提示信息
        this.$message({
          type: 'success',
          message: '删除成功',
          duration: 1000
        })
        // 获取数据
        this.getusers()
      })
    },
    async searchUsers() {
      const { result } = await this.$http.get('/users/search/user', { params: { page: this.page, size: this.size, searchMsg: this.searchMsg } })
      if (result.data.length == 0) {
        this.$message({
          type: 'error',
          message: '没有查询到相关用户',
          duration: 1000
        })
        this.searchMsg = ''
        return
      }
      this.users = result.data
      this.searchMsg = ''
    },
  }
}
</script>

<style scoped>
.user-container {
  margin-top: 20px;
  min-height: 600px;
}
.el-input {
  width: 70%;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
